<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleClose">确 定</el-button>
                </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="任务名称">
              <el-input v-model="searchObject.name" placeholder="任务名称" name="name">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="18" style="padding: 0 10px;margin-top: 5px;">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary" @click="addView">新增</el-button>
        <el-button type="primary" @click="syncTask">任务同步</el-button>
        <span style="margin-left: 15px;">执行数量:{{metaData.numberOfJobsExecuted}}</span>
        <span style="margin-left: 15px;">运行状态:{{metaData.started}}</span>
      </div>

      <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
        <el-table-column label="任务名称" prop="name" width="300">
        </el-table-column>
        <el-table-column label="记录类型" prop="recordType" width="100">
        </el-table-column>
        <el-table-column label="cron表达式" prop="cronExpression" width="100">
        </el-table-column>
        <el-table-column label="任务备注" prop="remark">
        </el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="160">
        </el-table-column>
        <el-table-column width="260" align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-button text size="small" class="operation_bt" :icon="InfoFilled" type="info"
                       @click="showView(scope.row)">详情
            </el-button>

            <el-button text size="small" class="operation_bt" :icon="Edit" type="primary"
                       @click="editView(scope.row)">编辑
            </el-button>
            <el-button text size="small" class="operation_bt" :icon="Edit" type="primary"
                       @click="handleTest(scope.row)">测试
            </el-button>
            <el-button text :icon="Delete" class="operation_bt" type="danger" size="small"
                       style="cursor: pointer;" @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="pageData.totalPage" :total="pageData.total" @size-change="sizeChange"
                       @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>

import {Delete, Edit, InfoFilled} from '@element-plus/icons-vue'
import {defineStore} from 'pinia'
import {usePage} from "@/utils/usePage";
import {useDelete} from "@/utils/useDelete";
import {useView} from "@/utils/useView";
import http from "@/utils/request";
import {ElMessage} from "element-plus";
import {loadData} from "@/uses/loadData";
import Space from "@/views/common/user/user/space.vue";

const searchStore = defineStore('schedulingTaskStore', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        name: null
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.name = null;
}
const {
  pageData,
  sizeChange,
  pageChange,
  search,
  changeTableSort,
  loading
} = usePage("/schedulingTask/search", searchObject);
const {dialogVisible, deleteData, handleDelete} = useDelete("/schedulingTask/delete", search);
const {showView, addView, editView} = useView();
const syncTask = async () => {
  let res = await http.post("/loadTasks", {});
  if (res.code === 200) {

    ElMessage({
      message: '同步任务成功',
      type: 'success',
    })
  }
}

const handleTest=async (row)=>{
  let res = await http.post("/exeTask", row);
  if (res.code === 200) {
    ElMessage({
      message: '测试任务成功',
      type: 'success',
    })
  }
}

const {data:metaData} =loadData("/getMetaData")
</script>

<style scoped></style>
